<template>
  <div>
    <h1>Login</h1>
    <form @submit.prevent="login">
      <div>
        <label for="email">Email:</label>
        <input type="email" v-model="email" required />
      </div>
      <div>
        <label for="password">Password:</label>
        <input type="password" v-model="password" required />
      </div>
      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script>
import api from '@/services/api';
import { mapActions } from 'vuex';

export default {
  name: 'Login',
  data() {
    return {
      email: '',
      password: '',
    };
  },
  methods: {
    ...mapActions(['setUser']),
    async login() {
      try {
        const user = {
          email: this.email,
          password: this.password,
        };
        const response = await api.loginUser(user);
        this.setUser(response.data); // 假设API返回用户数据
        this.$router.push('/profile');
      } catch (error) {
        console.error('Error logging in:', error);
      }
    },
  },
};
</script>
